<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Noted - 截图示例</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f7fa;
        }
        .app-container {
            display: flex;
            height: 100vh;
            overflow: hidden;
        }
        .sidebar {
            width: 250px;
            background-color: #fff;
            border-right: 1px solid #e0e6ed;
            padding: 20px 0;
            box-shadow: 0 0 10px rgba(0,0,0,0.05);
        }
        .logo {
            display: flex;
            align-items: center;
            padding: 0 20px;
            margin-bottom: 30px;
        }
        .logo img {
            width: 40px;
            height: 40px;
            margin-right: 10px;
        }
        .logo h1 {
            font-size: 1.2rem;
            color: #409EFF;
            margin: 0;
        }
        .menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .menu li {
            padding: 12px 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        .menu li.active {
            background-color: #ecf5ff;
            color: #409EFF;
            border-right: 3px solid #409EFF;
        }
        .menu li i {
            margin-right: 10px;
            font-size: 18px;
        }
        .main-content {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .search-bar {
            display: flex;
            width: 100%;
            max-width: 600px;
            margin-right: 20px;
        }
        .search-bar input {
            flex: 1;
            padding: 8px 15px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            font-size: 14px;
        }
        .actions {
            display: flex;
        }
        .btn {
            padding: 8px 15px;
            border: none;
            border-radius: 4px;
            margin-left: 10px;
            cursor: pointer;
            font-size: 14px;
        }
        .btn-primary {
            background-color: #409EFF;
            color: white;
        }
        .btn-outline {
            background-color: transparent;
            border: 1px solid #dcdfe6;
            color: #606266;
        }
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .card {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
            padding: 20px;
            transition: all 0.3s;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .card h3 {
            margin-top: 0;
            color: #303133;
            font-size: 16px;
        }
        .card-content {
            color: #606266;
            font-size: 14px;
            line-height: 1.5;
            max-height: 100px;
            overflow: hidden;
            margin-bottom: 15px;
        }
        .tags {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 10px;
        }
        .tag {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            margin-right: 8px;
            margin-bottom: 8px;
            background-color: rgba(64,158,255,0.1);
            color: #409EFF;
            border: 1px solid rgba(64,158,255,0.2);
        }
        .card-footer {
            display: flex;
            justify-content: space-between;
            color: #909399;
            font-size: 12px;
        }
        /* 深色模式样式 */
        .dark-mode {
            background-color: #1e1e1e;
            color: #e0e0e0;
        }
        .dark-mode .sidebar {
            background-color: #252525;
            border-right: 1px solid #333;
        }
        .dark-mode .logo h1,
        .dark-mode .menu li.active {
            color: #409EFF;
        }
        .dark-mode .menu li.active {
            background-color: rgba(64,158,255,0.1);
        }
        .dark-mode .card {
            background-color: #252525;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.2);
        }
        .dark-mode .card h3 {
            color: #e0e0e0;
        }
        .dark-mode .card-content {
            color: #b0b0b0;
        }
        .dark-mode .search-bar input {
            background-color: #333;
            border-color: #444;
            color: #e0e0e0;
        }
        .dark-mode .btn-outline {
            border-color: #444;
            color: #b0b0b0;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <div class="sidebar">
            <div class="logo">
                <svg viewBox="0 0 128 128" width="40" height="40">
                    <path fill="#409EFF" d="M64 0C28.7 0 0 28.7 0 64s28.7 64 64 64 64-28.7 64-64S99.3 0 64 0zm32 104H32c-2.2 0-4-1.8-4-4V28c0-2.2 1.8-4 4-4h64c2.2 0 4 1.8 4 4v72c0 2.2-1.8 4-4 4z"/>
                    <path fill="#409EFF" d="M44 48h40c1.1 0 2-.9 2-2s-.9-2-2-2H44c-1.1 0-2 .9-2 2s.9 2 2 2zm0 16h40c1.1 0 2-.9 2-2s-.9-2-2-2H44c-1.1 0-2 .9-2 2s.9 2 2 2zm0 16h32c1.1 0 2-.9 2-2s-.9-2-2-2H44c-1.1 0-2 .9-2 2s.9 2 2 2z"/>
                </svg>
                <h1>My Noted</h1>
            </div>
            <ul class="menu">
                <li class="active">
                    <i>📄</i> 所有笔记
                </li>
                <li>
                    <i>⭐</i> 收藏夹
                </li>
                <li>
                    <i>🏷️</i> 标签
                </li>
                <li>
                    <i>🗑️</i> 垃圾箱
                </li>
                <li>
                    <i>⚙️</i> 设置
                </li>
            </ul>
        </div>
        <div class="main-content">
            <div class="header">
                <div class="search-bar">
                    <input type="text" placeholder="搜索笔记..." />
                </div>
                <div class="actions">
                    <button class="btn btn-outline">视图</button>
                    <button class="btn btn-primary">+ 新笔记</button>
                </div>
            </div>
            <div class="card-grid">
                <div class="card">
                    <h3>会议记录 - 产品规划</h3>
                    <div class="card-content">
                        讨论了下一季度的产品路线图，确定了三个主要功能点：1. 用户认证系统升级 2. 数据导出功能 3. 移动端适配优化
                    </div>
                    <div class="tags">
                        <span class="tag">会议</span>
                        <span class="tag">产品</span>
                    </div>
                    <div class="card-footer">
                        <span>创建时间: 2023-04-21</span>
                        <span>更新时间: 2023-04-22</span>
                    </div>
                </div>
                <div class="card">
                    <h3>学习笔记 - Vue3 组合式 API</h3>
                    <div class="card-content">
                        Vue3 的组合式 API (Composition API) 提供了一种更灵活的方式来组织组件逻辑。主要概念包括 setup(), ref(), reactive(), computed(), watch() 等。
                    </div>
                    <div class="tags">
                        <span class="tag">学习</span>
                        <span class="tag">Vue</span>
                        <span class="tag">前端</span>
                    </div>
                    <div class="card-footer">
                        <span>创建时间: 2023-04-18</span>
                        <span>更新时间: 2023-04-20</span>
                    </div>
                </div>
                <div class="card">
                    <h3>项目需求分析</h3>
                    <div class="card-content">
                        基于用户反馈，我们需要优先解决以下问题：1. 性能优化 2. 数据同步问题 3. 界面响应式设计。需要与开发团队协调时间表。
                    </div>
                    <div class="tags">
                        <span class="tag">项目</span>
                        <span class="tag">需求</span>
                    </div>
                    <div class="card-footer">
                        <span>创建时间: 2023-04-15</span>
                        <span>更新时间: 2023-04-15</span>
                    </div>
                </div>
                <div class="card">
                    <h3>每周总结 - 第16周</h3>
                    <div class="card-content">
                        本周完成：1. 数据分析报告 2. 客户演示准备 3. 团队协作流程优化。下周计划：开始新功能设计与原型。
                    </div>
                    <div class="tags">
                        <span class="tag">周报</span>
                        <span class="tag">总结</span>
                    </div>
                    <div class="card-footer">
                        <span>创建时间: 2023-04-21</span>
                        <span>更新时间: 2023-04-21</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 示例切换深色模式的函数
        function toggleDarkMode() {
            document.body.classList.toggle('dark-mode');
        }
        
        // 如果需要演示深色模式，取消下面注释
        // document.addEventListener('DOMContentLoaded', toggleDarkMode);
    </script>
</body>
</html> 